<template>
    <div class="main">
        <div class="form">
            <div class="title">
                智慧点餐系统
            </div>
            <el-form :model="formData" label-width="auto" style="max-width: 400px" :rules="rules" ref="loginForm">
                <el-form-item prop="account">
                    <el-input v-model="formData.account" placeholder="请输入账号" type="text" style="margin: 30px 0;" >
                        <template #prefix>
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="formData.password" type="password" placeholder="请输入密码" show-password style="margin: 0 0 30px 0;" >
                    <template #prefix>
                        <el-icon>
                            <Lock />
                        </el-icon>
                    </template>    
                    </el-input>
                </el-form-item>
                <el-button @click="login()" type="primary" style="width: 100%">立即登录</el-button>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { checkLogin } from '../../api/account';
import { ref,reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { UserFilled, Lock } from '@element-plus/icons-vue'
import { useUserStore } from '../../stores/userstores'
const formData = reactive({
    account: '',
    password: ''
})
const loginForm = ref(null);
const validatorAccount = (rule, value, callback) => {
    let reg= /^([a-z]|[A-Z]|[0-9]){4,11}$/;
    if (value === '') {
        callback(new Error('请输入账号'))
    } else if (!reg.test(value)) {
        callback(new Error('账号格式不正确'))
    } else {
        callback()
    }
}
const validatorPassword = (rule, value, callback) => {
    let reg= /^([a-z]|[A-Z]|[0-9]){4,11}$/;
    if (value === '') {
        callback(new Error('请输入密码'))
    } else if (!reg.test(value)) {
        callback(new Error('密码格式不正确'))
    } else {
        callback()
    }
}
const rules = reactive({
    account:[{ validator: validatorAccount, trigger: 'blur' }],
    password:[{ validator: validatorPassword, trigger: 'blur'}]
})

const userStore = useUserStore();
const router = useRouter();
const login = () => {
    loginForm.value.validate(async (valid) => {
    
        if (valid) {
            const res = await checkLogin(formData);
            userStore.changeuser(res.id,res.role,res.token);
            sessionStorage.setItem('token', res.token);
            sessionStorage.setItem('id', res.id);
    console.log(res)
    if (res.code === 0) {
        ElMessage({
            message: res.msg,
            type: 'success',
        })
        router.push('/home')
    } else {
        ElMessage({
            message: res.msg,
            type: 'error',
        })
    }
    }}
)
}


</script>

<style lang="scss" scoped>
.form {
    width: 400px;
    height: 300px;

    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .title {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        font-weight: 700;
        color: white;
        ;
    }
}

.main {
    height: 100vh;
    background-color: rgb(28.8, 47.6, 67);
}

:deep(.el-input__wrapper) {
    background-color: transparent;
}
:deep(.el-input__inner) {
    color: white;
}
</style>